<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>新闻资讯</title>
</head>
<link rel="stylesheet" href="__PUBLIC__/css/amazeui.css"/>
<link rel="stylesheet" href="__PUBLIC__/css/app.css"/>
<link rel="stylesheet" href="__PUBLIC__/css/swiper.css"/>
<link rel="stylesheet" href="__PUBLIC__/css/animate.min.css"/>

<script src="__PUBLIC__/js/jquery.min.js"></script>
<script src="__PUBLIC__/js/swiper.js"></script>
<script src="__PUBLIC__/js/wow.min.js"></script>
<script src="__PUBLIC__/js/axios.min.js"></script>


<style type="text/css">
.clear-margin-padding {
	margin: 0;
	padding: 0;
}
</style>
<style type="text/css">

.text-line {
  border-top: 1px solid #909090; 
  width: 50px; 
  display: inline-block; 
  vertical-align: 5px;
}


.sub-title-div {
  text-align: center;
}

.sub-title-text {
  font-size: 20px;
  color: #00A0EA;
}

.sub-title-text-eng {
  font-size: 18px;
  color: #909090;
}


.news-title-div {
  width: 64%;
  margin: 0px auto;
}

.divider-border:not(:last-child) {
  border-bottom: 1px dashed #E5E5E5;
}

.news-title-ceil-box {
  padding: 30px 0;
}



</style>
<body>


<style type="text/css">
  
.tel-num-div {
  margin-left: 10px;
}

.header-div {
  height: 100px;
}

.tel-num-font-style {
  font-size: 24px;
  font-weight: bold;
}


.nav-panel {
  height: 50px;
  background-color: #009FE9;
}

.nav-bar-panel {
  height: 100%;
}

.nav-bar {
  height: 100%;
}

.nav-bar>li {
  height: 100%;
}

.nav-bar>li>a {
  height: 100%;
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

</style>

<div id="header">
  <div class="am-g">
      <div class="am-u-md-2 header-div">&nbsp;</div>
      <div class="am-u-md-6 header-div vertical-mid title-font-style">
        <?php echo ($webconfig['webname']); ?>
      </div>
      <div class="am-u-md-4 header-div vertical-mid">
        <div class="inline-div">
          <img class="inline-div" src="__PUBLIC__/img/tel.png">
        </div>
        <div class="inline-div tel-num-div">
          <div>服务热线：</div>
          <div class="tel-num-font-style" style="margin-top: -10px"><?php echo ($webconfig['tel_zx1']); ?></div>
        </div>
      </div>
  </div>

  <div class="am-g nav-panel">
    <div class="am-u-md-2">&nbsp;</div>
    <div class="am-u-md-10 nav-bar-panel">
      <ul class="nav-bar am-nav am-nav-pills">
        <li class="<?php if($activeArr['indexActive']) echo 'am-active'; ?>"><a href="<?php echo U('Index/index');?>">首页</a></li>
        <li class="<?php if($activeArr['aboutUsActive']) echo 'am-active'; ?>"><a href="<?php echo U('Index/about');?>">关于我们</a></li>
        <li class="<?php if($activeArr['productActive']) echo 'am-active'; ?>"><a href="<?php echo U('Index/product');?>">产品展示</a></li>
        <li class="<?php if($activeArr['newsActive']) echo 'am-active'; ?>"><a href="<?php echo U('Index/news');?>">新闻资讯</a></li>
        <li class="<?php if($activeArr['telUsActive']) echo 'am-active'; ?>"><a href="<?php echo U('Index/telus');?>">联系我们</a></li>
      </ul>
    </div>
  </div>
</div>




<div id="newsContentDiv">

<div style="width: 100%; height: 580px; background-image: url('<?php echo ($banner); ?>'); background-repeat: no-repeat; background-size: 100% 100%;">
</div>

  <div class="sub-title-div" style="margin-top: 30px;">
    <div class="sub-title-text">新闻资讯</div>
    <div>
      <span class="text-line"></span>
      <span class="sub-title-text-eng">News</span>
      <span class="text-line"></span>
    </div>
  </div>

  <div class="news-title-div wow bounceIn">
    <div class="am-g divider-border news-title-ceil-box" v-for="n in news">
      <div class="am-u-lg-1 am-u-md-2 clear-margin-padding">
        <div style="font-size: 30px; font-weight: 70; color: #000000;">{{n.day}}</div>
        <div style="font-size: 16px; margin-top: -10px;">{{n.year}}</div>
      </div>
      <div class="am-u-lg-11 am-u-md-10 clear-margin-padding">
        <div style="font-size: 20px; font-weight: 60; color: #666666; cursor: pointer;" @click="clickNewsTitle(n.id)">{{n.title}}</div>
        <div style="font-size: 15px; color: #666666; margin-top: 8px;">
          {{n.description}}
        </div>
      </div>
    </div>
  
  </div>

  <ul class="am-pagination am-pagination-default" style="text-align: center;">
      
      <li>
        <button type="button" class="am-btn am-btn-primary" v-bind:disabled="isNotHavaPrePage" @click="clickPrePage">上一页</button>
      </li>

      <li class="">
        <div style="padding: 0 15px;">{{currentPage}}/{{totlePage}}</div>
      </li>

      <li>
        <button type="button" class="am-btn am-btn-primary" v-bind:disabled="isNotHaveNextPage" @click="clickNextPage">下一页</button>
      </li>

  </ul>
</div>


<div id="footer">
<div class="footer-div">
  <div class="am-g">
    <div class="am-u-md-2">&nbsp;</div>
    <div class="am-u-md-5">
      <div class="title-font-style">
        <?php echo ($webconfig['webname']); ?>
      </div>
      <div style="font-size: 17px; font-weight: 20; color: #FFFFFF; margin-top: 35px;">
        全国客服服务热线
      </div>
      <div style="font-size: 30px; font-weight: bold; color: #FFFFFF; margin-top: 10px;">
        <?php echo ($webconfig['tel_zx1']); ?>
      </div>
    </div>
    <div class="am-u-md-5" style="padding-top: 25px;">
      <div style="font-size: 20px; font-weight: 20; color: #FFFFFF">
        联系我们
      </div>
      <div class="footer-text-style" style="margin-top: 25px;">
        联系电话：<?php echo ($webconfig['tel_zx1']); ?>
      </div>
      <div class="footer-text-style">
        联系邮箱：<?php echo ($webconfig['webemail']); ?>
      </div>
      <div class="footer-text-style">
        联系地址：<?php echo ($webconfig['address_1']); ?>
      </div>
      
    </div>
  </div>
</div>
<div class="footer-bar">
  <div class="footer-bar-text-style">
    ©2018 <?php echo ($webconfig['webname']); ?>—Leil版权所有
  </div>
  <div class="footer-bar-text-style">
    本站由Leil提供技术支持
  </div>
</div>
</div>
</body>

<!-- <script src="__PUBLIC__/js/vue.min.js"></script> -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">

new WOW().init()

new Vue({
  el: "#newsContentDiv",
  data: {
    currentPage: 1,
    totlePage: 0,
    isNotHavaPrePage: false,
    isNotHaveNextPage: false,
    news: new Object(),
  },
  mounted: function() {
    this.getTotlePage()
    // this.refreshNews()
  },
  methods: {
    refreshNews: function() {
      let that = this
      axios.get(`/index.php/Index/getNewsPerPage?current=${this.currentPage}`)
        .then(function(response) {
          that.news = response.data
          that.isNotHavaPrePage = that.currentPage === 1
          that.isNotHaveNextPage = that.currentPage === that.totlePage
          // console.log(response.data)
        })
    },

    getTotlePage: function() {
      let that = this
      axios.get('/index.php/Index/getNewsTotlePageNum')
        .then(function(response) {
          // console.log(response)
          that.totlePage = response.data.pageNum
          that.refreshNews()
        })
    },

    clickNextPage: function() {
      this.currentPage = this.currentPage + 1
      this.refreshNews()
    },

    clickPrePage: function() {
      this.currentPage = this.currentPage - 1
      this.refreshNews()
    },

    clickNewsTitle: function(id) {
      window.location.href = `/index.php/Index/newsPage?id=${id}`
    }

  }
})

</script>
</html>